<template>
    <div>
        <button @click="add">点击我+1</button>
        <button @click="delayAdd">点击我2S加上6</button>
        <button @click="evenAdd">偶数+3</button>
        <h1>{{ countStore.count }}</h1>
        <h2>{{ countStore }}</h2>
        <hr>
        <h1>{{todoStore}}</h1>
        <hr>
        <h2>{{todoStore.total}}</h2>
        <button @click="handler">点击修改todo数据</button>
    </div>
</template>

<script setup lang="ts">
import useCountStore from './store/modules/count';
import useTodoStore from './store/modules/todos';
//计数器小仓库的获取函数
const countStore = useCountStore();
console.log(countStore);
//+1
const add = () => {
    //countStore.count++;//组件内直接修改
    //类似于vuex派发actions
    //可以携带多个参数
    countStore.add(1, 2);
}

//2S之后+1
const delayAdd = () => {
    countStore.delayAdd(6, 2000);
}


//偶数+3
const evenAdd = () => {
    countStore.evenAdd();
}

/*************************************todo小仓库*********** */
const todoStore = useTodoStore();

const handler = ()=>{
     todoStore.add();
}
</script>

<style scoped></style>